<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub贡献热力图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
        }

        body {
            background-color: #ffffff;
            color: #24292f;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
        }

        .container {
            width: 100%;
            max-width: 1000px;
            background-color: #f6f8fa;
            border-radius: 6px;
            padding: 20px;
            margin-top: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            border: 1px solid #d0d7de;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
        }

        h1 {
            font-size: 24px;
            color: #0969da;
            margin-bottom: 10px;
        }

        .description {
            color: #57606a;
            font-size: 14px;
        }

        .legend {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-top: 10px;
            font-size: 12px;
            color: #57606a;
        }

        .legend span {
            margin: 0 5px;
        }

        .legend-colors {
            display: flex;
            margin-left: 5px;
        }

        .legend-color {
            width: 10px;
            height: 10px;
            margin: 0 2px;
            border-radius: 2px;
        }

        .heatmap-container {
            overflow-x: auto;
            margin-top: 20px;
        }

        .heatmap {
            display: flex;
            padding: 10px;
            background-color: #ffffff;
            border-radius: 4px;
        }

        .months {
            display: flex;
            margin-left: 40px;
            margin-bottom: 5px;
            font-size: 10px;
            color: #57606a;
        }

        .month {
            width: 11.5px;
            text-align: center;
            margin: 0 2px;
        }

        .days {
            display: flex;
            flex-direction: column;
            font-size: 11px;
            margin-right: 5px;
            margin-top: -1px;
            color: #57606a;
        }

        .day {
            height: 12px;
            text-align: right;
            margin: 2px 0;
        }

        .cells {
            display: flex;
            flex-direction: row; /* 改为横向排列 */
        }

        .week-column {
            display: flex;
            flex-direction: column; /* 每列是纵向的7天 */
        }

        .cell {
            width: 12px;
            height: 12px;
            margin: 2px;
            border-radius: 2px;
            background-color: #ebedf0;
            position: relative;
            border: 1px solid rgba(27, 31, 35, 0.06);
        }

        .cell:hover::after {
            content: attr(data-contributions) " 贡献于 " attr(data-date);
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #000;
            color: #fff;
            padding: 5px 8px;
            border-radius: 3px;
            white-space: nowrap;
            z-index: 100;
            font-size: 12px;
        }

        .less {
            background-color: #9be9a8;
        }

        .little {
            background-color: #40c463;
        }

        .some {
            background-color: #30a14e;
        }

        .more {
            background-color: #216e39;
        }

        footer {
            margin-top: 30px;
            text-align: center;
            font-size: 12px;
            color: #57606a;
        }

        @media (max-width: 768px) {
            .heatmap-container {
                overflow-x: scroll;
            }

            .months {
                margin-left: 25px;
            }

            .month {
                font-size: 9px;
            }

            .day {
                font-size: 9px;
            }
        }
    </style>
</head>

<body>
    <header>
        <h1>GitHub 贡献热力图</h1>
        <p class="description">可视化您在过去一年中的代码贡献活动</p>
    </header>

    <div class="container">
        <div class="heatmap-container">
            <div class="months" id="months"></div>
            <div style="display: flex;">
                <div class="days" id="days"></div>
                <div class="cells" id="cells"></div>
            </div>
        </div>

        <div class="legend">
            <span>较少</span>
            <div class="legend-colors">
                <div class="legend-color less"></div>
                <div class="legend-color little"></div>
                <div class="legend-color some"></div>
                <div class="legend-color more"></div>
            </div>
            <span>较多</span>
        </div>
    </div>

    <footer>
        <p>本地存储数据 | 使用纯HTML, CSS, JavaScript实现</p>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 本地存储的贡献数据
            const contributionData = {
                "2025-09-01": 19,
                "2025-10-01": 22
            };

            // 初始化
            renderHeatmap(contributionData);

            // 渲染热力图
            function renderHeatmap(contributions) {
                const cellsContainer = document.getElementById('cells');
                const monthsContainer = document.getElementById('months');
                const daysContainer = document.getElementById('days');

                // 清空容器
                cellsContainer.innerHTML = '';
                monthsContainer.innerHTML = '';
                daysContainer.innerHTML = '';

                // 日期配置 - 注意：参考实现中是从周日开始的
                const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六'];
                const monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];

                // 添加星期标签
                for (let i = 0; i < 7; i++) {
                    const dayEl = document.createElement('div');
                    dayEl.className = 'day';
                    dayEl.textContent = daysOfWeek[i];
                    daysContainer.appendChild(dayEl);
                }

                // 计算日期范围 - 过去365天
                const today = new Date();
                today.setHours(0, 0, 0, 0);

                const oneYearAgo = new Date(today);
                oneYearAgo.setFullYear(today.getFullYear() - 1);
                oneYearAgo.setDate(oneYearAgo.getDate() + 1);

                // 关键修复：调整开始日期为周日（与参考实现一致）
                const dayOfWeek = oneYearAgo.getDay(); // 0=周日, 1=周一, ..., 6=周六
                const daysToSubtract = dayOfWeek; // 计算回退到最近的周日
                const startDate = new Date(oneYearAgo);
                startDate.setDate(oneYearAgo.getDate() - daysToSubtract);
                startDate.setHours(0, 0, 0, 0);

                // 计算结束日期为最近的周六
                const endDay = today.getDay();
                const daysToAdd = (6 - endDay + 7) % 7; // 计算到下一个周六的天数
                const endDate = new Date(today);
                endDate.setDate(today.getDate() + daysToAdd);
                endDate.setHours(0, 0, 0, 0);

                // 计算总周数
                const totalDays = Math.ceil((endDate - startDate) / (24 * 60 * 60 * 1000)) + 1;
                const totalWeeks = Math.ceil(totalDays / 7);

                // 生成月份标签 - 修复月份标签对齐问题
                let currentMonth = -1;
                let currentYear = -1;
                const monthElements = [];
                
                for (let week = 0; week < totalWeeks; week++) {
                    const weekStartDate = new Date(startDate);
                    weekStartDate.setDate(startDate.getDate() + week * 7);

                    const monthEl = document.createElement('div');
                    monthEl.className = 'month';

                    // 只在新月份的第一周显示月份名称
                    if (weekStartDate.getMonth() !== currentMonth || weekStartDate.getFullYear() !== currentYear) {
                        currentMonth = weekStartDate.getMonth();
                        currentYear = weekStartDate.getFullYear();
                        monthEl.textContent = monthNames[currentMonth];
                    }

                    monthsContainer.appendChild(monthEl);
                    monthElements.push(monthEl);
                }

                // 生成贡献格子 - 按列（周）组织
                for (let week = 0; week < totalWeeks; week++) {
                    const weekColumn = document.createElement('div');
                    weekColumn.className = 'week-column';
                    
                    for (let day = 0; day < 7; day++) {
                        const cellDate = new Date(startDate);
                        cellDate.setDate(startDate.getDate() + week * 7 + day);

                        // 检查是否在有效日期范围内
                        const isFuture = cellDate > today;
                        const isBeforeStart = cellDate < oneYearAgo;

                        const cellEl = document.createElement('div');
                        cellEl.className = 'cell';
                        cellEl.setAttribute('data-date', formatDate(cellDate));

                        if (isFuture || isBeforeStart) {
                            cellEl.style.visibility = 'hidden'; // 隐藏无效日期
                        } else {
                            const dateStr = formatDateForData(cellDate);
                            const count = contributions[dateStr] || 0;
                            cellEl.setAttribute('data-contributions', count);

                            // 设置贡献级别
                            if (count > 0) {
                                if (count <= 5) {
                                    cellEl.classList.add('less');
                                } else if (count <= 10) {
                                    cellEl.classList.add('little');
                                } else if (count <= 15) {
                                    cellEl.classList.add('some');
                                } else {
                                    cellEl.classList.add('more');
                                }
                            }
                            cellEl.setAttribute('title', `${formatDate(cellDate)}: ${count} 次贡献`);
                        }

                        weekColumn.appendChild(cellEl);
                    }
                    
                    cellsContainer.appendChild(weekColumn);
                }
            }

            // 格式化日期显示
            function formatDate(date) {
                const year = date.getFullYear();
                const month = date.getMonth() + 1;
                const day = date.getDate();
                return `${year}年${month}月${day}日`;
            }

            // 格式化日期用于数据查找
            function formatDateForData(date) {
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                return `${year}-${month}-${day}`;
            }
        });
    </script>
</body>

</html>